import React, { useState, useEffect, useRef, useImperativeHandle, forwardRef,memo } from 'react';
import { Toast, Image } from 'antd-mobile'
import { AddCircleOutline, CloseCircleOutline } from 'antd-mobile-icons'
import { PhotoProvider, PhotoView } from 'react-photo-view';
import 'react-photo-view/dist/react-photo-view.css';
import { baseUrl } from '@/utils/request';
import Index from '@/api/upload';
import "./index.less"

const photoImg = (id) => { return baseUrl + '/admin-v3/sys-file/preview/' + id }

function UploadPhotos(props, ref) {
    const [photoList, setPhotoList] = useState([])
    const inputRef = useRef(null)
    const { detaiObj = {}, showUpload, isAdd } = props

    useImperativeHandle(ref, () => ({
        photoList: photoList,
        setPhotoListFinish: setPhotoListFinish
    }));

    const setPhotoListFinish = ids => {
        if (ids.length > 1) {
            if (detaiObj.status == 'FINISH') {
                setPhotoList([])
            }
            setPhotoList((pre) => {
                setPhotoList(pre.concat(ids.split(",")))
            })
        }
    }

    const uploadStream = (base64) => {
        let fileData = {
            inputStream: base64
        }
        Index.uploadInputStream(fileData).then(res => {
            if (res.data.code == 0) {
                setPhotoList(photoList.concat(res.data.data.id))
            } else {
                Toast.show({
                    content: '上传失败',
                })
            }
        })
    }

    const handleImageChange = (val) => {
        const file = val.target.files[0];
        const reader = new FileReader()
        reader.readAsDataURL(file)
        reader.onload = (e) => {
            uploadStream(e.target.result)
        }
    }

    const deleteImg = (index) => {
        photoList.splice(index, 1)
        setPhotoList([...photoList])
    }

    return (
        <div className='photo-wrap'>
            <div className='photo-list'>
                {
                    photoList?.length > 0 ?
                        <PhotoProvider>
                            {photoList.map((item, index) => (
                                <PhotoView key={index} src={photoImg(item)}>
                                    <div className='adm-image'>
                                        <Image
                                            src={photoImg(item)}
                                            width={60}
                                            height={60}
                                            fit='cover'
                                            style={{ borderRadius: 8 }}
                                        />
                                        {
                                            detaiObj.status == showUpload || isAdd ?
                                                <CloseCircleOutline className='icon-close' onClick={e => {
                                                    e.stopPropagation()
                                                    deleteImg(index)
                                                }} /> : null
                                        }
                                    </div>
                                </PhotoView>
                            ))}
                        </PhotoProvider>
                        : <div style={{ fontSize: 12, color: "#ccc", flex: 1, display: 'flex', justifyContent: "center", alignItems: "center" }}>暂无更多图片</div>
                }
                {
                    detaiObj.status == showUpload || isAdd ?
                        <div className='photo-add' onClick={() => inputRef.current.click()}>
                            <AddCircleOutline fontSize={22} />
                        </div> : null
                }
            </div>

            <input style={{ display: 'none' }}
                ref={inputRef}
                type="file"
                accept="image/*"
                capture="camera"
                onChange={handleImageChange}
            />
        </div>
    );
}

export default forwardRef(UploadPhotos);
